<template>
  <div class="book-box">
    <Header />
    <div class="main">
      <div class="section1">
        <div class="bg-img">
          <img src="../assets/images/bookPage.jpg" alt />
        </div>
        <div class="content">
          <div class="image">
            <img src="../assets/images/bookPage.jpg" alt />
          </div>
          <div class="text">
            <p class="wenzhang-title">你的決定錯了</p>
            <p>
              <span>作者</span>
              <span>冬雪十二</span>
            </p>
            <span class="zuoping-id-div">
              作品ID
              <span class="zuoping-id">12345678</span>
            </span>

            <br />
            <div class="b-l">
              <div class="b-div">
                <el-icon :size="16" color="#ffffff">
                  <StarFilled />
                </el-icon>
                <span class="span-text">642</span>
              </div>
              <div class="b-div">
                <el-icon :size="16" color="#ffffff">
                  <View />
                </el-icon>
                <span class="span-text">34.3 Ｋ</span>
              </div>
            </div>

            <div class="tag">
              <div class="tag-box">
                <a href="#">恋爱言情</a>
                <a href="#">BL</a>
                <!-- <a href="#">穿越转生</a> -->
              </div>
              <!-- <div class="yuedu-box">
								<div class="yuedu-btn">開始閱讀</div>
								<img class="href-image" @click="aixingAction" src="@/assets/images/aixing.png"
									v-if="!collShow" alt="" />
								<img class="href-image" @click="aixingAction" src="@/assets/images/aixing-slecet.png"
									v-if="collShow" alt="" />

								<img @click="Share()" class="href-image" src="@/assets/images/share.png" alt="" />
              </div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="section2">
        <div class="demo-tabs" @tab-click="handleClick" stretch="true">
          <a
            v-for="(item, index) in tabList"
            class="tabs-btm-box"
            :class="{ 'tabs-btm': index == tabsIndex }"
            @click="tabListAction(index)"
            :key="index"
            href="#introduction"
            label="简介"
            name="first"
          >
            {{
            item.title }}
          </a>
        </div>
      </div>
      <div class="container">
        <div class="section3" id="introduction">
          <div class="high-block">
            <h2 class="shengwei-box">我身為一名霸總，栽培老公、寵他，不用你們管！</h2>
          </div>
          <div class="article-body">
            <p>
              忠犬助理攻 林言楓 X 霸氣傲嬌總裁受 俞文澤
              <br />【2025 KadoKado 百万小说創作大賞—BL戀愛小说組 參賽作】
              <span class="LinesEllipsis-ellipsis">...</span>
            </p>
            <el-button link class="more">
              展开作品简介
              <el-icon class="el-icon--right">
                <ArrowDown />
              </el-icon>
            </el-button>
          </div>
        </div>
        <div class="section4" id="mulu">
          <div class="catalog">
            <div class="title">
              <h3>目录</h3>
              <el-icon :size="24" color="#2d3748">
                <Sort />
              </el-icon>
            </div>
            <div class="inner">
              <p class="lianzai-box">
                <!-- <img src="@/assets/images/book.png" class="icon-image-mulu"></img> -->
                <span class="gong-box">连载中</span>
              </p>
              <p>
                <span class="gong-box">成人向</span>
              </p>
              <p>作品篇幅</p>
              <p>
                字
                <span class="gong-box">108.4 Ｋ</span>
              </p>
              <p>
                <img src="@/assets/images/mulu.png" class="icon-image-mulu" />
                <span class="gong-box">共 31 章</span>
              </p>
            </div>
          </div>
          <div class="story-box">
            <div class="title">正文故事</div>
            <div class="story-list">
              <div class="item" @click="bookdetails" v-for="(item, index) in 3">
                <h4>01. 是死亡，也是重生</h4>
                <div class="bottom">
                  <div>
                    <p>
                      <img class="count-img" src="../assets/images/coll-cha.png" alt />
                      11
                    </p>
                    <p>
                      <img class="count-img" src="../assets/images/pinglun.png" alt />
                      38
                    </p>
                    <p>
                      字
                      108.4 Ｋ
                    </p>
                  </div>
                  <div class="date">2025.06.03 19:26</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section5" id="zixun">
          <div class="block">
            <h3>作者</h3>
            <div class="author-info">
              <div class="dis-row space-between">
                <img
                  src="https://pic2.zhimg.com/v2-febc9228d18886a29c68a66536279dfb_r.jpg?source=1940ef5c"
                  class="image-ave"
                />
                <div class="space-between dongxue-box">
                  <div class>
                    <div>冬雪十二</div>
                  </div>
                  <div>
					<div class="guanbi-box">关注</div>
				  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="block">
            <h3>分类</h3>
            <div class="classify-info">
              <el-button color="#ff8674" round>恋爱言情</el-button>
              <el-button color="#ff8674" round>BL</el-button>
              <el-button color="#ff8674" round>穿越转生</el-button>
            </div>
          </div>
          <div class="block">
            <h3>标签</h3>
            <div class="tag-info">
              <el-button @click="tagAction()" color="#ff8674" round plain>耽美</el-button>
              <el-button @click="tagAction()" color="#ff8674" round plain>双向重生</el-button>
              <el-button @click="tagAction()" color="#ff8674" round plain>有虐</el-button>
              <el-button @click="tagAction()" color="#ff8674" round plain>双向救赎</el-button>
              <el-button @click="tagAction()" color="#ff8674" round plain>华文原创</el-button>
              <el-button @click="tagAction()" color="#ff8674" round plain>2024百万小说创作大赏初选入围作品</el-button>
            </div>
          </div>
        </div>
        <!-- <div class="section6" id="rate">
					<div class="spcae-between">
						<div>作品评分</div>
						<el-icon :size="16" color="gray">
							<InfoFilled />
						</el-icon>
					</div>

					<div class="spcae-between btn-flex">
						<div class="dis-row">
							<div>
								<img src="https://www.kadokado.cn/static/images/Kadokado-notice-rate_128.svg"
									class="no-data"></img>
							</div>
							<div>還沒有人評分，來當第一位留下評價的角角者吧！</div>
						</div>
						<div>
							<div>我的評分</div>
							<div>
								<el-rate v-model="rateBtm" />
							</div>
						</div>
					</div>
        </div>-->
      </div>
    </div>

    <div class="fixed-footer">
      <div class="start-btn">
        <div class="start-btn-box">开始阅读</div>
      </div>

      <div>
        <img class="start-coll" src="@/assets/images/coll-cha.png" />

        <img @click="jubaoAction" class="start-coll" src="@/assets/images/jianju.png" />
      </div>
    </div>

    <el-dialog :show-close="false" title="作品举报" v-model="jubaoShow" width="90%">
      <div>
        <el-form :label-position="'top'" :inline="false">
          <el-form-item label-width="100px" label="作品举报"></el-form-item>

          <el-form-item label-width="100px" label="举报理由">
            <el-select placeholder="请选择">
              <el-option></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label-width="100px" label="举报说明">
            <el-input :rows="10" placeholder="请详细说明举报原因" type="textarea"></el-input>

            <div>0 / 1000</div>
          </el-form-item>

          <el-form-item>
            <div class="aggres-success-box">
              <el-button class="aggres-success">同意并发送</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Header from "../components/Header.vue";
import {
  ArrowDown,
  Star,
  View,
  Sunrise,
  Sort,
  Memo,
  StarFilled,
  InfoFilled
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const router = useRouter();
const rateBtm = ref();
const jubaoShow = ref(false);

const activeName = ref("first");

const jubaoAction = () => {
  jubaoShow.value = true;
};

const bookdetails = () => {
  router.push("/chapter");
};

const tabList = ref([
  {
    title: "简介"
  },
  {
    title: "章节"
  },
  {
    title: "资讯"
  }
]);
const tabsIndex = ref(0);
const tabListAction = index => {
  tabsIndex.value = index;
};

const collShow = ref(false);
const aixingAction = () => {
  if (collShow.value) {
    collShow.value = false;
  } else {
    collShow.value = true;
  }
};

const tagAction = () => {
  router.push("/search");
};

const dialogTableVisible = ref(false);
const Share = () => {
  dialogTableVisible.value = true;
};
</script>

<style lang="scss" scoped>
.aggres-success-box {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}
.aggres-success {
  border-radius: 10px;
  background-color: #ff8674;
  color: white;
}
.start-coll {
  width: 1.4rem;
}

.start-coll:nth-of-type(2) {
  margin-left: 2rem;
}

.fixed-footer {
  position: fixed;
  bottom: 0px;
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  background-color: white;
  align-items: center;
  padding: 1rem;

  .start-btn {
    .start-btn-box {
      width: 13rem;
      height: 3rem;
      background-color: #ff8674;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 30px;
    }
  }
}

.fei-img-box {
  margin-top: 1rem;
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.fei-img {
  width: 3rem;
  margin-left: 2rem;
}

.fei-img:nth-of-type(1) {
  margin-left: 0;
}

.fenxiang-btn {
  text-align: center;
}

.songli-btn {
  background-color: #d7af70;
  border-radius: 3rem;
  color: white;
  display: inline-flex;
  justify-content: center !important;
  padding: 1rem 5rem;
}

.btn-flex {
  margin-top: 20px;
  align-items: center;
}

.dis-row {
  display: inline-flex;
  align-items: center;
}

.no-data {
  width: 10rem;
  margin-right: 10px;
}

.section6 {
  margin-top: 3rem;
}

.spcae-between {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}

.tabs-btm-box {
  padding-bottom: 10px;
}

.tabs-btm {
  border-bottom: 1px #ff8674 solid;
}

.book-box {
  padding-bottom: 100px;

  .section1 {
    position: relative;
    overflow: hidden;
    padding: 2rem 1rem;

    h2 {
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.05em;
      color: white;
      text-align: center;
      margin-bottom: 20px;
    }

    .bg-img {
      position: absolute;
      top: 0rem;
      left: 0rem;
      width: 100%;
      height: 100%;
      filter: blur(5px);
      transform: scale(1.3);
      transform-origin: center center;
      pointer-events: none;
      z-index: -1;

      img {
        position: absolute;
        height: 100%;
        width: 100%;
        inset: 0px;
        color: transparent;
        object-fit: cover;
        object-position: center top;
      }
    }

    .content {
      display: grid;
      gap: 1rem;
      grid-template-columns: 1fr 1fr;
      max-width: 31rem;
      margin: 0 auto;

      .image {
        width: 11.43rem;
        height: 16.3rem;
        display: flex;
        grid-column: 1 / 2;
        -webkit-box-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        align-items: center;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .text {
        display: flex;
        grid-column: 2 / 3;
        flex-direction: column;
        position: relative;

        p {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          margin-bottom: 0.5rem;

          span {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.625;
            letter-spacing: 0.05em;
            color: white;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-flex;
          }
        }

        .b-l {
          width: 100%;
          display: flex;

          .b-div {
            color: white;
            margin-left: 0.32rem;
            display: inline-flex;
            align-items: center;

            .span-text {
              margin-left: 0.2rem;
              white-space: nowrap;
              font-size: 0.75rem;
            }
          }
        }

        .zuoping-box {
          color: white;
          margin-bottom: 10px;
          font-size: 0.75rem;
        }

        .tag {
          position: absolute;
          bottom: 0;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          gap: 0.5rem;

          a {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.625;
            letter-spacing: 0.05em;
            color: white;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50rem;
          }
        }
      }
    }
  }

  :deep(.el-tabs__nav) {
    padding: 0.3rem 0;
  }

  .section3 {
    margin-bottom: 2rem;

    .high-block {
      padding: 0.5rem 1rem;
      background-color: #ffb0a4;
      display: flex;
      gap: 0.5rem;
      -webkit-box-align: center;
      align-items: center;
      border-radius: 0.25rem;
      border-width: 0.0625rem;
      border-style: solid;
      border-color: #fe8674;
      margin-bottom: 1rem;

      h2 {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 2;
        letter-spacing: 0.05em;
        color: white;
        word-break: break-all;
      }
    }

    .article-body {
      p {
        font-size: 0.875rem;
        font-weight: 300;
        line-height: 2;
        letter-spacing: 0.05em;
        color: #4a5568;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all;
        overflow: hidden;
      }

      .more {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 4rem;
      }
    }
  }

  .section4 {
    margin-bottom: 2rem;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3rem;
      gap: 1rem;
      padding: 1rem 0;

      h3 {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #2d3748;
      }
    }

    .inner {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 2;
      letter-spacing: 0.05em;
      width: 100%;
      padding: 0.25rem 0.5rem;
      gap: 0rem;
      background-color: #f7fafc;
      border-radius: 0.25rem;
      color: #718096;

      p {
        display: inline-flex;
        align-items: center;
        margin-left: 2rem;
      }

      div {
        display: flex;
        align-items: center;
        gap: 1rem;
      }
    }

    .story-box {
      .story-list {
        .item {
          display: block;
          padding-left: 1rem;
          border-bottom: 1px solid #edf2f7;
          padding-bottom: 1rem;

          h4 {
            font-size: 0.875rem;
            font-weight: 400;
            letter-spacing: 0.05em;
            color: #2d3748;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 3rem;
          }

          .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            div {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              font-size: 0.75rem;
              color: #718096;

              p {
                display: flex;
                align-items: center;
                gap: 0.5rem;
              }
            }
          }
        }
      }
    }
  }

  .section5 {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .block {
      h3 {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #2d3748;
        height: 3rem;
      }

      .author-info {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        :deep(.el-avatar) {
          border: 0.125rem solid #ff8674;
        }

        h4 {
          font-size: 0.875rem;
          font-weight: 400;
          line-height: 2;
          letter-spacing: 0.05em;
          color: #2d3748;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .classify-info {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 0.5rem;

        :deep(.el-button) {
          color: #ffffff;
          margin: 0;
        }
      }

      .tag-info {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 0.5rem;

        :deep(.el-button) {
          background-color: #ffffff;
          margin: 0;
        }
      }
    }
  }
}

.section2 {
}

.demo-tabs {
  width: 30%;
  margin-left: 35%;
  padding: 20px 0;
  display: inline-flex;
  justify-content: space-between;
}

/* 平板设备 */
@media screen and (max-width: 992px) {
}

/* 移动设备 */
@media screen and (max-width: 768px) {
  .demo-tabs {
    width: 70%;
    margin-left: 15%;
    padding: 20px 0;
    display: inline-flex;
    justify-content: space-between;
  }

  .lianzai-box {
    margin-left: 0px !important;
  }

  p:nth-of-type(5) {
    margin-left: 0.5rem !important;
  }
}

/* 小屏幕手机 */
@media screen and (max-width: 480px) {
  .demo-tabs {
    width: 70%;
    margin-left: 15%;
    padding: 20px 0;
    display: inline-flex;
    justify-content: space-between;
  }

  .lianzai-box {
    margin-left: 0px !important;
  }

  p:nth-of-type(5) {
    margin-left: 0.5rem !important;
  }
}

.icon-image {
  margin-right: 5px;
}

.chuangzuo-box {
  color: #a0aec0;
  font-size: 12px;
}

.image-ave {
  width: 7rem;
  height: 4rem;
  border-radius: 50%;
}

.icon-image-mulu {
  width: 16px;
  height: 16px;
}

.wenzhang-title {
  color: white;
}

.yuedu-btn {
  border-radius: 3rem;
  border: 1px white solid;
  color: white;
  width: 180px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.yuedu-box {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
}

.tag-box {
  a {
    padding: 5px;
    margin-left: 0.5rem;
  }

  a:nth-of-type(0) {
    margin-left: 0;
  }
}

.href-image {
  width: 1.8rem;
  height: 1.8rem;
  margin-left: 2rem;
}

.href-image:hover {
  cursor: pointer;
}

.gong-box {
  white-space: nowrap;
  margin-left: 10px;
}

.dongxue-box {
  margin-left: 10px;
}

.shengwei-box {
  white-space: nowrap;
}

.zuoping-id {
  margin-left: 0.4rem;
}

.zuoping-id-div {
  white-space: nowrap;
  width: 100px;
  font-size: 0.75rem;
  color: white;
}

.lianzai-box {
  display: inline-flex;
}

.guanbi-box{
	border: 1px #ff8674 solid;
	border-radius: 30px;
	color: #ff8674;
	padding: 5px 50px;
	font-size: 14px;
}
</style>